<template>
  <div style="margin-top:20px">
    <!-- ----------------------------------custom------------------------------------------->
    <el-table ref="multipleTable" height="520" border :data="rule_map" size='mini'>
      <template slot="empty">
        <el-empty :description="$t('暂无数据')"></el-empty>
      </template>
      <el-table-column prop="rule_id" align='center' :label="$t('规则ID')" width="80" />
      <el-table-column prop="action" align='center' :label="$t('动作')" width="80">
        <template slot-scope="scope">
          {{ $t(actionList[scope.row.action]) }}
        </template>
      </el-table-column>
      <el-table-column align='center' :label="$t('规则名称')" width="120">
        <template slot-scope="scope">
          <tooltip :copyText="ruleNameFormat(scope.row)" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="desc" align='center' :label="$t('描述')" min-width="150">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.desc" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="content_map" align='center' :label="$t('特征集')" min-width="200">
        <template slot-scope="scope">
          <tooltip :html="contentMapFormat(scope.row,true)" :content="contentMapFormat(scope.row, false)" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('操作')" width="160" fixed='right'>
        <template slot-scope="scope">
          <el-button type="success" plain @click="editRule(scope.row)" size='mini' :class="'edit' + (scope.$index + 1)">{{$t('编辑')}}</el-button>
          <el-button type="danger" plain @click="deleteRule(scope.row)" size='mini' :class="'del' + (scope.$index + 1)">{{$t('删除')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import ruleArray from '../../ruleArray'
export default {
  name: 'CustomTable',
  props: {
    ruleMap: {
      type: Array,
      default () {
        return []
      }
    }
  },
  watch: {
    ruleMap: {
      handler (newValue, oldValue) {
        this.rule_map = []
        newValue.forEach(val => {
          if (val.proto === 'custom') {
            this.rule_map.push(val)
          }
        })
      },
      deep: true // 深度监听
    }
  },
  data () {
    return {
      dialogVisible: false,
      rule_map: [],
      matchTypeList: ruleArray.matchTypeList,
      actionList: { 'accept': this.$t('允许'), 'alert': this.$t('告警') },
      checkbox: {
        'false': this.$t('关'),
        'true': this.$t('开')
      }
    }
  },
  mounted () {
    this.rule_map = []
    this.ruleMap.forEach(val => {
      if (val.proto === 'custom') {
        this.rule_map.push(val)
      }
    })
  },
  methods: {
    deleteRule (row) {
      this.$emit('delRuleMap', row)
    },
    editRule (row) {
      this.$emit('largeConfig', row)
    },
    contentMapFormat (row, end) {
      let str = ''
      for (let item of row.content_map) {
        str += this.$t('特征名称:') + item.content_name + ','
        str += this.$t('匹配模式:') + this.matchTypeList[item.match_type] + ';'
        if (end) {
          str += '<br>'
        }
      }
      return str
    },
    ruleNameFormat (row) {
      return row.rule_name
    }
  }
}
</script>
